<template>
  <el-container class="main">

    <!--头部区域-->
    <el-header>
      <div>
        <router-link to="/cpgl" class="logo-title">&nbsp;&nbsp;security后台管理系统</router-link>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">{{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!--页面主体区域-->
    <el-container>

      <!--侧边栏-->
      <!-- 用户管理、订单管理 -->
      <el-aside style="width: 200px">
        <el-menu text-color="#008390" active-text-color="#008390" class="el-menu-vertical-demo">
          <router-link class="router-link-active" to="/user">
            <el-menu-item index="1">
              <template slot="title">
                <i class="el-icon-user" style="color: #008390"></i>
                <span slot="title">用户管理</span>
              </template>
            </el-menu-item>
          </router-link>

          <router-link class="router-link-active" to="/admin">
            <el-menu-item index="2">
              <template slot="title">
                <i class="el-icon-date" style="color: #008390"></i>
                <span slot="title">管理员权限</span>
              </template>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>

      <!--右侧内容主体-->
      <el-main style="background-color: white">
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>


<script>
import userApi from "@/assets/api/userApi";
export default {
  name: "index",
  data() {
    return {
      // 用户数据
      user: {
        name: ''
      }
    }
  },
  mounted() {
    this.getCookie()
  },
  methods: {
    //退出登录
    loginOut() {
      localStorage.clear()
      this.$router.push("/login")
      userApi.logout().catch(error => {
        console.error('退出登录', error);
      });
    },
    // 读取cookie中的账户和密码
    getCookie() {
      let that = this;
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] === "account") {
            that.user.name = arr2[1]; //保存到保存数据的地方
          }
        }
      }
    },
  }
}
</script>

<style>
@import "../assets/css/Index.css";
</style>